<template>
	<!-- 头部头像登录区域 -->
	<view class="top">
		<view class="top_left">
			<view>
				<text v-if="!islogin">头像</text>
				<image v-else :src="uimg" mode="cover"></image>
			</view>
		</view>
		<view v-if="!islogin" class="top_b_box">
			<button class="top_btn_n" @click="login">点击登录</button>
		</view>
		<view v-else class="top_min">
			<text class="top_info">{{uname}}</text>
		</view>
		<view v-if="islogin" class="top_ri">
			<button class="top_btn_d" @click="outlogin">退出登录</button>
		</view>
	</view>
	<!-- 下方主体 -->
	<view class="footer">
		<view class="footer_fun">
			<!-- 卡卷商城 -->
			<view class="footer_fun_card">
				<view class="footer_fun_card_le">
				</view>
				<view class="footer_fun_card_mi">卡卷商城</view>
				<view @click="bycard" class="footer_fun_card_ri">前往购买></view>
			</view>
			<!-- 我的卡卷 -->
			<view class="footer_fun_card">
				<view class="footer_fun_card_le">
				</view>
				<view class="footer_fun_card_mi">我的卡卷</view>
				<view @click="Card" class="footer_fun_card_ri">3张></view>
			</view>
			<!-- 常见问题 -->
			<view class="footer_fun_card">
				<view class="footer_fun_card_le">
				</view>
				<view class="footer_fun_card_mi">常见问题</view>
				<view @click="check" class="footer_fun_card_ri">查看></view>
			</view>
			<!-- 联系商家 -->
			<view class="footer_fun_card">
				<view class="footer_fun_card_le">

				</view>
				<view class="footer_fun_card_mi">联系商家</view>
				<view @click="callphone" class="footer_fun_card_ri">拨打电话></view>
			</view>
			<view class="footer_fun_card_record">
				<view class="footer_fun_card_record_le">
					<view>
						<text>我的学习记录</text>
						<text>累计—共学习了XX小时</text>
						<text>
							第一次学习时间:2015-05-15 15:05:15
						</text>
						<text>最后的学习时间:2015-05-15 15:05:15</text>
					</view>
				</view>
				<view class="footer_fun_card_record_ri">

					<view class="">
						<button open-type="share" class=" iconfont icon-fenxiangtianchong"></button>
					</view>
					<view class="">
						<button @click="detailed">详细</button>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		reactive,
		toRefs
	} from 'vue';
	import {http} from '../../static/utils/http.js';
	export default {
		setup() {
			
			const data = reactive({
				// 判断用户是否登录
				islogin: false,
				// 头像
				uimg:'',
				// 用户昵称
				uname: '用户昵称',
				xname:'',
				isok:false,
				isid:'',
				adph:'',
				// 点击登录按钮
				login() {
					wx.getUserProfile({
						desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						success: (res) => {
							console.log(res);
							data.ximg=res.userInfo.avatarUrl;
							data.xname=res.userInfo.nickName;
							wx.login({
								success(res) {
									if (res.code) {
										//发起网络请求code码
										http({url:'/applogin',data:{code: res.code,},method:'post'})
										.then((res)=>{
											// 获取opid
											wx.request({
												url: 'https://api.weixin.qq.com/sns/jscode2session',
												data: {
													appid: 'wxf3bc4cc574ea29aa',
													secret: '61d3c41bf7931b2edffcd3802d6fc269',
													js_code: res.data,
													grant_type: 'authorization_code'
												},
												success(res) {
													return new Promise((resolve,reject)=>{
														if(res.data.openid){
															data.isok=res.data.openid;
															// 发起登录请求
															http({url:'/apprelogin',data:{id:res.data.openid},method:'post'})
															.then((res)=>{
																data.uimg=data.ximg;
																data.uname=data.xname;
																data.islogin=true;
																if(res.data.data.length<1){
																	// 向数据库插入用户数据
																	resolve(http({url:'/appadduser',data:{name:data.uname,opid:data.isok},method:'post'})
																.then((res)=>{
																	console.log(res.data.data.affectedRows)
																	if(res.data.data.affectedRows===1){
																		http({url:'/apprelogin',data:{id:data.isok},method:'post'}).then(res=>{
																			console.log('注册过后的登录');
																			console.log(res);
																			uni.setStorage({
																				key: 'id',
																				data: res.data.data.user_id,
																				success: function () {
																					console.log('success');
																				}
																			});
																		}).catch(error=>console.log(error))
																	}
																})
																.catch(error=>console.log(error)))
																
																} else {
																	data.isid=res.data.data[0].user_id;
																	console.log(data.isid);
																	uni.setStorage({
																		key: 'id',
																		data: data.isid,
																		success: function () {
																			console.log('success');
																		}
																	});
																}
															})
															.catch(error=>console.log(error))
														}
													})
													
												},
												fail() {
													return 0
												}
											})
										})
										.catch(error=>console.log(error))
									} else {
										console.log('登录失败！' + res.errMsg)
									}
								}
							})
						},
						fail() {
							return 0
						}
					})

				},
				// 点击退出按钮
				outlogin() {
					data.uimg = '';
					data.isok='';
					data.uname = '用户昵称';
					data.islogin = false;
					uni.setStorage({
						key: 'id',
						data: '',
						success: function () {
							console.log('success');
						}
					});
				},
				// 我的卡卷
				Card() {
					uni.navigateTo({
						url: '/pages/MycardStock/mycardstock/mycardstock'
					});
				},
				// 点击详细按钮
				detailed() {
					uni.navigateTo({
						url: `/pages/studyPage/studyPage?opid=${data.isid}`
					});
				},
				// 购买卡卷
				bycard() {
					uni.navigateTo({
						url: '/pages/cardCouponsMall/cardCouponsMall'
					});
				},
				// 查看常见问题
				check() {
					uni.navigateTo({
						url: '/pages/commonProblem/commonProblem'
					});
				},
				// 拨打电话
				callphone() {
					return new Promise((resolve,reject)=>{
						// 获取商家电话号码
						http({url:'/getAdminData',params:{},method:'get'}).then(res=>{
							this.adph=res.data.data[0].admin_iphone
							resolve(
								uni.makePhoneCall({
									phoneNumber: this.adph, //仅为示例
									success: () => {
										console.log('成功的回调');
									},
									fail() {
										console.log('失败的回调');
									}
								})
							)
							}).catch(error=>console.log(error));
					})
				}
			})

			return {
				...toRefs(data)
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url('~@/static/fonts/iconfont.css');

	.top {
		height: 200rpx;
		line-height: 200rpx;
		display: flex;
		position: relative;

		.top_left {
			flex: 3;
			line-height: 160rpx;
			display: inline-block;
			padding-top: 15rpx;
			padding-left: 20rpx;
			box-sizing: border-box;

			view {
				width: 160rpx;
				height: 160rpx;
				border-radius: 80rpx;
				text-align: center;
				border: 1px solid #ccc;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.top_b_box {
			margin-right: 390rpx;
			padding-top: 60rpx;

		}

		.top_btn_n {
			height: 60rpx;
			color: #8080FF;
			background-color: #fff;
			border: 1px solid #8080FF;
			font-size: 24rpx;
			z-index: 2;
		}

		.top_min {
			flex: 6;
			padding-top: 10rpx;

			.top_info {
				float: left;
				margin-top: -20rpx;
			}
		}

		.top_ri {
			flex: 3;
			padding-top: 60rpx;
			padding-right: 10rpx;

			.top_btn_d {
				float: right;
				font-size: 24rpx;
				background-color: #ccc;
				color: #fff;
			}
		}


	}

	.footer {
		background-color: #F2F2F2;
		padding-top: 20rpx;

		.footer_fun {
			background-color: #fff;
			padding: 40rpx 20rpx;

			.footer_fun_card {
				height: 120rpx;
				display: flex;
				line-height: 120rpx;
				background-color: #F2F2F2;
				margin-bottom: 20rpx;

				.footer_fun_card_le {
					flex: 2;
					box-sizing: border-box;
					padding-left: 30rpx;
					padding-top: 10rpx;

					view {
						width: 100rpx;
						height: 100rpx;
						text-align: center;
						border-radius: 50rpx;
						border: 1px solid #000;
					}
				}

				.footer_fun_card_mi {
					flex: 7;
				}

				.footer_fun_card_ri {
					flex: 3;
					color: #8080FF;
				}
			}

			.footer_fun_card_record {
				background-color: #F2F2F2;
				padding: 40rpx 20rpx;
				display: flex;

				.footer_fun_card_record_le {
					flex: 8;

					view {
						text:nth-child(n+1) {
							display: block;
							font-size: 24rpx;
							padding: 10rpx 0;
						}

						text:nth-child(1) {
							font-size: 40rpx;
							font-weight: 700;
							display: block;
						}
					}
				}

				.footer_fun_card_record_ri {
					flex: 4;

					view:nth-child(1) {
						height: 200rpx;

						button {
							float: right;
							width: 60rpx;
							height: 60rpx;
							line-height: 60rpx;
							background-color: #8080FF;
							padding-left: 13rpx;
							box-sizing: border-box;
						}
					}

					view:nth-child(2) {
						button {
							width: 180rpx;
							height: 50rpx;
							background-image: linear-gradient(to right, #8282FE, #D3D2F7);
							border-radius: 20rpx;
							font-size: 24rpx;
							line-height: 50rpx;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>
